Johnson Zachary es el creador de este fantástico efecto de iluminación creado con la propiedad text-shadow. Utiliza una imagen PNG que es la que aporta la iluminación al efecto y JavaScript con el fin de simular las sombras en tiempo real de la propiedad text-shadow.
Funciona en Firefox, Safari, Opera y Chrome. Si queremos ver el efecto en nuestro blog aunque sea simplemente por curiosidad podemos añadirlo en un gadget de html de la siguiente forma.
Antes de </head> pegamos el contenido del siguiente archivo que son el script y los estilos,
El archivo contiene la imagen PNG de fondo, recuerdo que es conveniente alojarla en nuestro propio servidor para evitar futuros problemas con el servidor donde la he alojado.
Se encuentra en los estilos en background: url(spotlight.png) top center;
Guardamos los cambios y nos situamos en plantilla de diseño, allí editamos un nuevo gadget de HTML y pegamos en su interior lo siguiente:
<div id="text-shadow-box">
<div class="wall">
<p id="tsb-text">
Gem@ BLOG</p>
<div>
</div>
</div>
<div id="tsb-spot">
</div>
</div>
Sustituimos Gem@ BLOG por vuestro título y para que ocupe todo el ancho y alto de vuestro gadget modificamos el ancho en width: 990px y el alto en height: 406px lo haremos en los estilos donde dice:
#text-shadow-box {
position: relative;
width: 990px;
height: 406px;
background: #666;
overflow: hidden;
cursor: none;
border: 1px solid #333;
}
ohhh esta muy bueno, como si estuvieramos en la oscuridad
:: Me recuerda cuando entramos a un cine y el acomodador va alumbrando con la linterna delante nuestra :)
Es una linterna! qué precioso queda, para hacer marquesinas, a jugar a jugar :P
Besos!
Hola gema, muy Curioso efecto, funcional para una intro creo!. Lastimosamente hasta el momento los navegadores no se han puesto de acuerdo en estandarizar el html y funciones adicionales, para que todo se viera igual en todo.
:: Hola Graciela, ha jugar se ha dicho :)
:: Henry Herrera en ese sentido soy muy pesimista, no imagino ese día que se vea igual en todos los navegadores :S
(Plas) (Plas) (Plas)
(Plas)=Emoticono aplausos
:: Gracias paisano, un placer verte por aquí :D
Queee lindooooo!!!! lástima el tema del explorer.
gracias.:)
:: La hormiguita, siempre hay alguien que pasa de las diferencias entre navegadores, ha sido divertido probarlo :)
Hola, Gema. Antes que nada, te felicito por tus buenos tips para adornar nuestro blogger. He usado uno que otro, jeje. La razón por la que te escribo es, porque yo también poseo un blog y le puse un nuevo template y de todos los que encontré, el que tengo actualmente me ha gustado su formato, ya le estuve editando algunas cosillas. Mas tengo un problemita, no sé si puedas darte una vuelta por mi blog y tú misma puedas verlo. Al final de la página hay unas opciones, que no se como se llaman, jeje. Aun no me familiarizo con los términos... Las opciones son creo para ver el primer post, el siguiente, el anterior y el ultimo, mas cuando doy click ahi, no se dirige a nada. Creo pensar que es la opcion de los templates clasicos que dicen, ver más entradas, pero no me funciona. ¿Me podrías ayudar? De antemano, gracias! Saludos.
:: Annie Grivera eso que comentas en la paginación, no sabría decirte a qué se debe el problema puede ser porque Blogger "decide" ahora la cantidad de páginas a mostrar o por algún error de la paginación, quien mejor puede orientarte es la creadora de la plantilla
http://templatesparavoce.blogspot.com
Good morning
gema ;) Thank you for the wonderful topic
But not in the knowledge that this Coded Study to Slow Site..
I would recommend next time to try the codes in other and not in your blog..It would make for a slow blog
Thank you once again
:: El efecto del ejemplo se ha añadido en un iframe, eso quiere decir que no afecta la carga del blog khaled, los motivos pueden ser otros y entre ellos la conexión.
Hola mi nombre es Gabriel y son un seguidor de tu Blog que está Muy Bueno y me ha servido de gran utilidad. Respecto a este efecto, lo he probado y no me funciona en Chrome (ojo puedo estar haciendo mal algo), de todas maneras te consulto por las dudas: 1) bajo el archivo CSS text-shadow.txt a un servidor(en mi caso uso Dropbox), 2) antes de head copio el link que extraigo del servidor, guardo la plantilla. 3)en un gadget copio lo que está en la primera parte, guardo el gadget y visualizo el blog. Lo que no me queda claro es el segundo parrafo donde mencionas: "...el ancho y alto de vuestro gadget modificamos el ancho en width: 990px y el alto en height: 406px lo haremos en los estilos..." Por lo que veo en el archivo txt descargado en el servidor esto ya está modificado, se refiere a esto o hay que agregarlo en el gadget. Gracias por tu respuesta. Saludos.
:: Gabriel no debes subir nada a ningún servidor ni pegar ninguna url.
En la entrada dice "pegamos el contenido del siguiente archivo" es decir que ya viene preparado de forma que sólo hay que copiar el archivo que yo he preparado y pegarlo antes de </head>
Cuando digo que "para que ocupe todo el ancho y alto de vuestro gadget modificamos el ancho en width: 990px y el alto en height: 406px lo haremos en los estilos" me refiero que tu gadget según lo tengas aplicado tendrá medidas distintas a mi ejemplo para que ocupe todo el ancho de tu blog debes modificar los estilos que indico al final donde dice width: 990px y el alto en height: 406px (debes calcular las medidas de tu espacio y sustituirla por la que ya vienen)
Gabriel: Ok, lo probé y funciona. Muchas Gracias.
:: Estupendo Gabriel :)
Nota: solo los miembros de este blog pueden publicar comentarios.